<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>



    /* 
        1.將所有的段落設置為綠色(字體)

        元素選擇器
            作用:根據標籤名來宣志宏指定的元素
            語法:標籤名{}
            例子:p{} h1{} div{}
    
    */

    p{

        color: red;
    }

    h1{
        color: silver;
    }

    /* 
        id選擇器(不可以重複)
            作用:根據元素的id屬性值選中一個元素
            語法:#id屬性值{}
            例子:#ok{} #red{}
    */
    #red{

        color: red;
    }
    /* 
        只把"就3"設置成紅色
    */
    
    /* 
        class選擇器(可以重複)
            作用:根據元素的class屬性值選中一組元素
            語法:class屬性值

    */
    .blue{

        color: blue;
    }
    .da{

        font-size: 20px;
    }

    /* 
        通配選擇器
            總用:選中頁面中所有的元素
            語法:*
    */
    *{
        color: burlywood;
    }

</style>



</head>
<body>
    <p>就這8</p>
    <p>就這7</p>
    <!-- 
        class是一個標籤的屬性,它和id類似,不同的是class可以重複使用
            可以通過class屬性來為元素分組
            可以同時為一個元素指定多個class是屬性
     -->
    <p class="blue da">就這6</p>
    <p class="blue">就這5</p>
    <p>就這4</p>
    <p id="red">就3</p>
    <p>就這2</p>
    <p>就這1</p>
</body>
</html>